<template>
    <div id="flow">
            <div class="state">
                <p class="ing">{{stateInfo.stateStr}}</P>
                <p class="ed">{{stateInfo.stateInfo}}</p>
            </div>
            <div class="userInfos" v-if="showLogisInfo">
                <div>
                    <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/express_car.png" alt="">
                </div>
                <div>
                    <p style="color:#9948c3;">快递已从 浙江杭州发出 准备发往济南</p>
                    <p>2017-12-09 13:51:44</p>
                </div>
                <div>
                    <img style="margin-left:1rem;width: .16rem;height: .25rem;" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/more@2x.png">
                </div>
            </div>
            <div class="Prompt" v-if="showStateInfomsg">
                <p class="Ptext">{{stateInfo.msg}}</p>
            </div>
            <ul class="backwe" @click="goDiscuss" v-if="showOtherInfo">
                <li v-for="(x,y) in otherInfo" :class="y=='key'?'wechat':'wemoney'">{{x}}</li>
            </ul>
           <!-- <ul class="consult" @click="goDiscuss(talkInfo.orderid)">
                <li class="Condetail">协商详情</li>
                <li class="Conimg"><img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/more@2x.png"></li>
            </ul>-->
            <ul class="service" @click="gozhichi">
                <li class="Skefu"><img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/service_a.png"><span>联系客服</span></li>
                <li class="Conimg"><img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/more@2x.png"></li>
            </ul>
            <div class="reDiv" v-for="x in dataInfo">
                <p>{{x}}</p>
            </div>

        <div class="End">
            <ul class="endBtn">
               <!-- <li @click="modify">修改申请</li>
                <li @click="goRefund">重新申请</li>
                <li @click="goSucc">撤销申请</li>-->
               <!-- <li @click="goAllLog">填写退货物流</li>-->
                <li v-for="x in btType" :type="x.type" @click="getStatus(x.key)">{{x.key | status}}</li>
            </ul>
        </div>
        <div class="opaction" v-if="show"></div>
        <div class="bBox" v-if="text">
            <p>退款申请仅可<span>撤销一次</span>,您确定要撤销申请吗</P>
            <ul class="spac">
                <li @click="succ">暂不撤销</li>
                <li @click="goBack">确认撤销</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import config from "../config/config.js";
    export default{
        data(){
            return{
                show:false,
                text:false,
                stateInfo:Object,
                dataInfo:[],
                otherInfo:[],
                showLogisInfo:Boolean,
                showStateInfomsg:Boolean,
                msg:'',
                showOtherInfo:Boolean,
                btType:[],
                talkInfo:{}
            }
        },
        methods:{
            modify(status){
                this.$router.push("/allorder/refund"+'/'+this.$route.params.orderid+'/'+status)
            },
            goRefund(status){
                this.$router.push("/allorder/refund"+'/'+this.$route.params.orderid+'/'+status)
            },
            goDiscuss(orderid){
                this.$router.push("/allorder/discuss/"+orderid)
            },
            goBack(){
                this.show = false,
                this.text = false,
                this.CancelPost(this.$route.params.orderid)
            },
            succ(){
                this.show = false,
                this.text = false
            },
            goSucc(){
                this.show = true,
                this.text = true
            },
            goAllLog(){
                this.$router.push("/allorder/allLog")
            },
            GetRefundDetails(orderid){
                var value=JSON.stringify({"orderid":orderid,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/order/GetRefundDetails',{
                    value:value,
                    key:key
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            if(response.data.data.logisInfo==''){
                                this.showLogisInfo=false;
                            }else{
                                this.showLogisInfo=true
                            }
                            if(response.data.data.stateInfo.msg==''){
                                this.showStateInfomsg=false;
                            }else{
                                this.showStateInfomsg=true;
                            }
                            if(response.data.data.otherInfo==''){
                                this.otherInfo=[];
                                this.showOtherInfo=false;
                            }else{
                                this.otherInfo=response.data.data.otherInfo;
                                this.showOtherInfo=true;
                            }
                            this.stateInfo=response.data.data.stateInfo;
                            this.dataInfo=response.data.data.dataInfo;
                            this.btType=response.data.data.btType;
                            this.talkInfo=response.data.data.talkInfo;
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            CancelPost(orderid){
                var value=JSON.stringify({"orderid":orderid,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/refund/CancelPost',{
                    value:value,
                    key:key
                },config)
                    .then(function(response) {
                            if(response.data.code==200){
                                this.GetRefundDetails(orderid)
                            }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getStatus(status){
                if(status=='CANCEL_REFUND'){
                    this.goSucc()
                }else if(status=='UPDATE_REFUND'){
                    this.modify(status)
                }else if(status=='AGAIN_REFUND'){
                    this.goRefund(status)
                }else if(status=='FAX_LOGISTICS'){
                    this.$router.push('/allorder/allLog/'+this.$route.params.orderid)
                }
            },
            gozhichi(){
                window.location.href='https://www.sobot.com/chat/h5/index.html?sysNum=8aa3c6e204e843ce93d80c7b9208d4e6'
            }
        },
        filters:{
            status:function(val){
                switch(val){
                    case 'UPDATE_REFUND':
                        return "修改申请";
                    case 'CANCEL_REFUND':
                        return "撤销申请";
                    case 'AGAIN_REFUND':
                        return "重新申请";
                    case 'FAX_LOGISTICS':
                        return "填写退货物流";
                }
            }
        },
        activated(){
            var orderid=this.$route.params.orderid;
            this.GetRefundDetails(orderid)
        }
    }
</script>

<style>
    
</style>